const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OpenBrowserPlugin = require('open-browser-webpack-plugin')

module.exports = {
  // js 执行入口文件 可以是字符串、数组、字符串对象（表示多个入口）
  entry: './main.js',
  // 表示最终想要的文件的输出配置，output是一个对象，内含多项配置
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // __dirname node定义的全局变量，防止mac与windows系统的不同
    path: path.resolve(__dirname, './dist')
  },
  module: {
    // rules是个对象数组
    rules: [
      {
        // 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里
        test: /\.css$/,
        // 这些引用的 loader 需要 npm install （下面的 minimize 参数表示要压缩css）
        // use: [
        //   'style-loader',
        //   {
        //     loader: 'css-loader',
        //     options: {
        //       minimize: true
        //     }
        //   }
        // ]
        // use 引入loader的问号参数也可这样写
        // use: ['style-loader', 'css-loader?minimize']
        // 除了在 webpack.config.js 里面配置 loader 外，在源码引入 css 时，也可以指定 loader 去加载 css
        // import 'style-loader!css-loader?minimize!./main.css'

        // 转换.css 文件
        use: ExtractTextPlugin.extract({
          // 转换 .css 文件时使用的 loader
          use: ['css-loader']
        }),
        // 还有include、exclude 来限制匹配文件的位置
        // include 只命中 src 文件夹中的满足上面 test 正则的文件
        // include: path.resolve(__dirname, 'src')
        // 排除 node_modules 文件 
        exclude: path.resolve(__dirname, 'node_modules')

      }
    ]
  },
  plugins: [
    new ExtractTextPlugin({
      // 从.js 文件中提取出 .css 文件的名称
      filename: `[name]_[contenthash:8].css`
    }),
    new OpenBrowserPlugin({
      url: 'http://localhost:8080'
    })
  ]
}